<template>
	<view class="goodsReleased-view">
		<view class="goods-name-ipt">
			<view class="name">
				{{$t("goodsReleased.tradeName")}}
			</view>
			<input class="goods-name-sty" v-model="queryParams.commodity" type="text" :placeholder="$t('wishReleased.hint.goods')" placeholder-style="color:#858585;font-size: 25rpx">
		</view>
		<view class="goods-name-ipt">
			<view class="name">
				{{$t("goodsReleased.tradeNameEn")}}
			</view>
			<input class="goods-name-sty" v-model="queryParams.commodityEn" type="text"
				:placeholder="$t('goodsReleased.hint.goodsEn')" placeholder-style="color:#858585;font-size: 25rpx">
		</view>
		<view class="goods-name">
			<view class="name">
				{{$t("wishReleased.brand")}}
			</view>
			<view class="select-brand" @tap="selectBrand">
				{{!brand?$t('wishReleased.hint.brand'):brand.newBrandName}}
			</view>
		</view>

		<view class="sort-desc" v-if="goodsSort.length > 0">
			<view class="name">
				{{$t("wishReleased.category")}}
			</view>
			<view class="sort-list" v-if="selectAcc.isSelect">
				<view class="sort-item" @tap="selectSort(item)" v-for="item in goodsSort" :key="item.id"
					v-if="goodsSort.length > 0">
					<!-- <image src="../../static/icon/bag.png" mode=""></image> -->
					<view class="img-desc">
						{{$t("wishReleased.language") == "zh"?item.brandName:item.brandEngName}}
					</view>
				</view>
			</view>

			<view class="select-acc" @tap="reSelectSort" v-else>
				{{selectAcc.name}}
			</view>
		</view>

		<view class="options-list" v-if="!selectAcc.isSelect">
			<view class="options" v-if="item.optionsList[0].length > 0 && item.brandName != '所在地'" v-for="(item, index) in options" :key="index">
				<!-- {{item}} -->
				<view class="name">
					<view class="name-title">
						{{$t("goodsReleased.language") == "zh"?item.brandName:item.brandEngName?item.brandEngName:item.brandName}}
					</view>
					<!-- <u-icon v-if="item.id == 12" @tap="popShow=true" name="question-circle-fill" size="16"></u-icon> -->
				</view>
				<view :class="item.selName == '请选择' || item.selName == 'Please select' ? 'wsel':'sel'" @tap="selectShow(index)">
					{{item.selName}}
				</view>
				<u-picker :show="item.show" ref="uPicker" :columns="item.optionsList"
					@confirm="confirm(index, item.idItemList, $event)" @cancel="cancel(index)" @close="close(index)"
					closeOnClickOverlay></u-picker>
			</view>
			<!-- <view class="options">
				<view class="name">
					{{$t("goodsReleased.freight")}}
				</view>
				<view class="sel" @tap="selectFreight">
					{{selName}}
				</view>
				<u-picker :show="fShow" ref="uPicker" :columns="freightList"
					@confirm="confirmFreight" @cancel="fShow = false" @close="fShow = false"
					closeOnClickOverlay></u-picker>
			</view> -->
			<view class="options">
				<view class="name">
					{{$t("goodsReleased.region")}}
				</view>
				<view :class="regionName == '请选择' || regionName == 'Please select' ? 'wsel':'sel'" @tap="selectRegions">
					{{regionName}}
				</view>
				<u-picker :show="rShow" ref="uPicker" :columns="regionList" @confirm="confirmRegions"
					@cancel="rShow = false" @close="rShow = false" closeOnClickOverlay></u-picker>
			</view>
			
			<view class="options">
				<view class="name">
					{{$t("goodsReleased.contain")}}
				</view>
				<u-checkbox-group 
					v-model="checked" 
					iconPlacement="right" 
					placement="row"
					@change="checkboxChange"
				>
					<u-checkbox 
						v-for="(item, index) in checkedList"
						:key="item.id"
						activeColor="#000"
						:label="$t('language') == 'zh'?item.brandName:item.brandEngName"
						:name="item.id"
						:disabled="disabled && item.id !== 266"
					></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>

		<view class="size">
			<view class="name">
				{{$t("wishReleased.dimensions")}}({{$t("wishReleased.company")}}cm)
			</view>

			<view class="ipt-size">
				<view class="long">
					<view class="name">
						{{$t("wishReleased.length")}}
					</view>
					<input type="number" :placeholder="$t('wishReleased.hint.length')" v-model="size.long">
				</view>
				
				<view class="high">
					<view class="name">
						{{$t("wishReleased.height")}}
					</view>
					<input type="number" :placeholder="$t('wishReleased.hint.height')" v-model="size.high">
				</view>
				<view class="wide">
					<view class="name">
						{{$t("wishReleased.width")}}
					</view>
					<input type="number" :placeholder="$t('wishReleased.hint.width')" v-model="size.wide">
				</view>
			</view>
		</view>
		
		<view class="date-options">
			<view class="date-name">
				{{$t("goodsReleased.year")}}
			</view>
			<view class="date-sel" @tap="yearShowFn">
				{{yearName}}
			</view>
			<u-picker :show="Yshow" :columns="yearList" @confirm="confirmYear" @cancel="Yshow=false" @close="Yshow=false" closeOnClickOverlay>
			</u-picker>
		</view>

		<!-- <view class="date-options">
			<view class="date-name">
				{{$t("goodsReleased.auctionTimeLimit")}}
			</view>
			<view class="date-sel" @tap="dateShowFn">
				{{dateName}}
			</view>
			<u-picker :show="dateShow" :columns="dateList" @confirm="confirmDate" @cancel="dateShow=false" @close="dateShow=false" closeOnClickOverlay></u-picker>
		</view> -->

		<view class="goods-price">
			<view class="name">
				{{$t("wishReleased.amountOfMoney")}}
			</view>
			<input class="goods-price-sty" v-model="money" type="text" :placeholder="$t('wishReleased.hint.money')" placeholder-style="color:#FF0000;font-size: 20rpx">
			<view class="sym">
				$
			</view>
		</view>
		<view class="options-list">
			<view class="options">
				<view class="name">
					<view class="name-title">
						{{$t('goodsReleased.hint.chineseDesc')}}
					</view>
				</view>
			</view>
		</view>
		<view class="goods-desc">
			
			<textarea v-model="queryParams.shopDescribe" name="" id="" cols="30" rows="10"
				:placeholder="$t('goodsReleased.hint.desc')"></textarea>
		</view>
		
			<view class="options-list">
			<view class="options">
				<view class="name">
					<view class="name-title">
						{{$t('goodsReleased.hint.englishDesc')}}
					</view>
				</view>
			</view>
		</view>
		<view class="goods-desc">
			<textarea v-model="queryParams.shopDescribeEn" name="" id="" cols="30" rows="10"
				:placeholder="$t('goodsReleased.hint.desc')"></textarea>
		</view>
		<shmily-drag-image v-if="imgList.length" v-model="imgList"   :number="28" :delImage="delImage"></shmily-drag-image>
		<u-upload v-if="imgNum < 28&&uploadAnimation==false" :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="28-imgNum">
			<view class="upload-img" style="flex: 1;">
				{{$t("goodsReleased.uploadPictures")}}
			</view>
		</u-upload>
		<u-loading-icon v-if="uploadAnimation==true"  ></u-loading-icon>
			<u-notify ref="uNotify"></u-notify>
		<view class="footer-btn">
			<!-- <view class="cancel-btn common-btn">
				{{$t("goodsReleased.cancel")}}
			</view> -->
		
			<view class="release-btn common-btn" @tap="publishGoods">
				{{$t("goodsReleased.release")}}
			</view>
		</view>
		
		<u-popup mode="center" :show="popShow" @close="popShow=false" @open="popOpen">
			<image class="pop-img" v-if="seriesUrl" :src="seriesUrl" mode=""></image>
			<!-- <image class="pop-img" v-else src="../../static/icon/bag.png" mode=""></image> -->
			<view class="pop-desc" v-else>
				{{$t("goodsReleased.noImg")}}
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getSort,
		createPublishGoods,
		getRegionsNew
	} from "@/common/api.js"
	
	import {
		API_URL
	} from '@/env'

	export default {
		watch:{
			money: {
				handler() {
					// console.log(123);
					const test = String(this.money).split(",");
					const reg = new RegExp("^[0-9]*\.?");
					// console.log(reg.test(this.money));
					if(!reg.test(test.join(""))) {
						setTimeout(() => {
							this.money = "";
						}, 0);
					}
					
					if(this.money.split(".")[1]&&this.money.split(".")[1].length > 2) {
						setTimeout(() => {
							this.money = "";
						}, 0);
					}
					
					setTimeout(() => {
						const temp = String(this.money).split(",");
						const temp1 = temp.join("");
						const temp2 = temp1.split(".");
						console.log(temp2);
						if(temp2[1] || temp2[1] == "") {
							this.money = String(temp2[0]).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + temp2[1];
						} else {
							this.money = String(temp2[0]).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
						}
					}, 0);
				},
				deep: true
			},
		},
		data() {
			return {
			
				uploadAnimation:false,
				regionIdList: [],
				seriesUrl: "",
					popShow: false,
				regionList: [
					[]
				],
				checked: [],
				checkedList: [],
				money: "",
				dateList: [
					[this.$t("goodsReleased.date1"), this.$t("goodsReleased.date2"), this.$t("goodsReleased.date3"), this.$t("goodsReleased.date4")]
				],
				brand: "",
				options: [],
				fileList1: [],
				imgList: [],
				goodsSort: [],
				yearList: [
					[]
				],
				yearName: this.$t('goodsReleased.hint.year'),
				Yshow: false,
				selectAcc: {
					name: "",
					isSelect: true
				},
				size: {
					long: "",
					wide: "",
					high: ""
				},
				dateShow: false,
				disabled: false,
				dateName: this.$t('wishReleased.hint.time'),
				minDate: new Date().valueOf(),
				dateValue: Number(new Date()),
				queryParams: {
					classificationId: "",
					measurement: "",
					auctionTime: "",
					shopDescribe: "",
					shopDescribeEn:"",
					money: "",
					productionTime: "",
					commodity: "",
					commodityEn:"",
					// freightId: "",
					imgs: [],
					originalPrice: "",
					standby4: "",
					status: 10,
					include: ""
					
				},
				regionName: this.$t('goodsReleased.hint.regionName'),
				idList: [],
					rShow: false,
				imgNum: 0,
				isClick: true
			}
		},
		methods: {
			selectRegions() {
				this.rShow = true;
			},
			confirmRegions(e) {
				this.regionName = e.value[0]
				this.rShow = false;
				console.log(this.queryParams);
				this.regionId = this.regionIdList[e.indexs[0]];
			},
			// 初始化地区接口
			async initRegions() {
				const res = await getRegionsNew();
				console.log(res);
				const tempIndex = res.findIndex(item => item.brandEngName == "region");
				res[tempIndex].children.forEach(item => {
					if (this.$t("language") == "zh") {
						this.regionList[0].push(item.brandName);
					} else {
						this.regionList[0].push(item.brandEngName);
					}
					// this.regionList[0].push(item.brandEngName);
					this.regionIdList.push(item.id);
				});
			},
			// 改变包含
			checkboxChange(n) {
			
				// 266无任何附件
				if(n.includes(266)) {
					this.disabled = true;
				} else {
					this.disabled = false;
				}
			},
			// 按钮改变
			radioChange(obj) {
				console.log(obj);
			},
			confirmDate(e) {
				console.log(e);
				this.dateName = e.value[0];
				let date = new Date();
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				let d = date.getDate();
				if (e.indexs[0] == 0) {
					MM += 1;
					if(MM > 12) {
						MM -= 12;
						y += 1;
					}
				}
				if (e.indexs[0] == 1) {
					MM += 2;
					if(MM > 12) {
						MM -= 12;
						y += 1;
					}
				}
				if (e.indexs[0] == 2) {
					MM += 3;
					if(MM > 12) {
						MM -= 12;
						y += 1;
					}
				}
				if (e.indexs[0] == 3) {
					MM += 6;
					if(MM > 12) {
						MM -= 12;
						y += 1;
					}
				}
				MM = MM < 10 ? ('0' + MM) : MM;
				d = d < 10 ? ('0' + d) : d;
				this.dateName = y + '-' + MM + '-' + d;
				this.dateShow = false;
			},
			dateChange() {
				console.log(this.dateValue); 
			},
			delImage(done) {
				done();
				// this.imgList.splice(index, 1);
				// this.queryParams.imgs.splice(index, 1);
				this.imgNum--;
			},
			dateConfirm(e) {
				let date = new Date(e.value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				let d = date.getDate();
				let h = date.getHours();
				let m = date.getMinutes();
				let s = date.getSeconds();
				MM = MM < 10 ? ('0' + MM) : MM;
				d = d < 10 ? ('0' + d) : d;
				h = h < 10 ? ('0' + h) : h;
				m = m < 10 ? ('0' + m) : m;
				s = s < 10 ? ('0' + s) : s; 
				this.dateName = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				this.dateShow = false;
			},
			dateClose() {
				this.dateShow = false;
			},
			dateShowFn() {
				this.minDate = new Date().valueOf();
				this.dateShow = true;
			},
			async publishGoods() {
				if(this.$t("goodsReleased.language")=='zh'){
					
					if (!this.queryParams.commodity) {
						this.showHint(this.$t("goodsReleased.releasedHint.goods"));
						return
					}
				}else{
					if (!this.queryParams.commodityEn) {
						this.showHint(this.$t("goodsReleased.releasedHint.goodsEn"));
						return
					}
				}
					
				
				if (!this.brand) {
					this.showHint(this.$t("wishReleased.releasedHint.brand"));
					return
				}
				
				// id列表为空 没选择完毕 不可发布
				// const isSel = this.idList.every((item, index) => {
				// 	return item !== "";
				// });
				const idCheck = this.idList.filter(item => item);
				const itemCheck = this.options.filter(item => item.idItemList.length > 0);
				// console.log(isSel, this.idList.length > 0);
				if (idCheck == itemCheck && this.idList.length > 0) {
					this.showHint(this.$t("goodsReleased.releasedHint.categoryAll"));
					return
				}
				
				console.log(this.queryParams.classificationId);
				if (!String(this.queryParams.classificationId).split(",")[1]) {
					this.showHint(this.$t("wishReleased.releasedHint.category"));
					return
				}
				
				const tempValue = this.queryParams.classificationId.split(",");
				this.queryParams.classificationId = tempValue[0] + "," + tempValue[1];
				this.queryParams.classificationId += "," + this.idList.join(",");
				
				if (this.checked.length <= 0) {
					this.showHint(this.$t("goodsReleased.releasedHint.contain"));
					return
				}
				
				if(this.checked.includes(266)) {
					this.queryParams.include = 266;
				} else {
					this.queryParams.include = this.checked.join(",");
				}
				// console.log(this.queryParams.classificationId);
				this.queryParams.measurement = "";
				for (let key in this.size) {
					if (!this.size[key]) {
						this.showHint(this.$t("wishReleased.releasedHint.size"));
						return
					}
						this.queryParams.measurement = 	this.size.long + "cm*" + this.size.high+ "cm*" + this.size.wide  + "cm";
				}
				if (this.yearName == this.$t('goodsReleased.hint.year')) {
					this.showHint(this.$t("goodsReleased.releasedHint.year"));
					return
				}
				
				if(this.yearName=='NIL'){
					this.queryParams.productionTime='1979'
				}else{
					this.queryParams.productionTime = this.yearName;
				}
				// this.queryParams.measurement = this.queryParams.measurement.substr(0, this.queryParams.measurement.length - 1); 
				// if (this.dateName == "请选择") {
				// 	this.showHint(this.$t("wishReleased.releasedHint.time"));
				// 	return
				// }
				
				// this.queryParams.auctionTime = this.dateName;
				
				if (!this.money) {
					this.showHint(this.$t("wishReleased.releasedHint.money"));
					return
				}
				
				const tempMoneyList = String(this.money).split(",");
				this.queryParams.money = tempMoneyList.join("");
				
				// 描述
				if(this.$t("goodsReleased.language")=='zh'){
					
					if (!this.queryParams.shopDescribe) {
						this.showHint(this.$t("goodsReleased.releasedHint.desc"));
						return
					}
				}else{
					if (!this.queryParams.shopDescribeEn) {
						this.showHint(this.$t("goodsReleased.releasedHint.desc"));
						return
					}
				}
				
				if(this.imgNum !== this.queryParams.imgs.length) {
					this.showHint(this.$t("wishReleased.releasedHint.waitImgUpload"));
					return
				}
				
				if(this.queryParams.imgs.length <= 0) {
					this.showHint(this.$t("wishReleased.releasedHint.imgUpload"));
					return
				}
				
				const {imgs, ...moreBagCommodityPublish} = this.queryParams;
				const data = {
					moreBagCommodityPublish,
					imgs
				}
				console.log(data);
				if(this.isClick) {
					this.isClick = false;
					const res = await createPublishGoods(data);
					if (res.code == 200) {
						
						uni.showToast({
							icon: 'success',
							title: this.$t("wishReleased.releasedHint.success"),
							duration: 1500
						})
						
						setTimeout(() => {
							this.isClick = true;
							// uni.switchTab({
							// 	url: "/pages/wishGoods/wishGoods"
							// })
							uni.navigateBack();
						}, 1500)
					}
					console.log(res);
				}
			},
			showHint(msg) {
				uni.showToast({
					icon: 'none',
					title: msg,
					duration: 980,
					mask: true
				})
			},
			yearShowFn() {
				this.Yshow = true;
			},
			// 删除图片
			delImg(index) {
				this.imgList.splice(index, 1);
				this.queryParams.imgs.splice(index, 1);
				this.imgNum--;
				// this.imgNum -= 1;
			},
			// 新增图片
			afterRead(event) {
				this.uploadAnimation=true
				console.log(event.file);
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(lists.length);
				// this.imgNum += lists.length;
				for (let i = 0; i < lists.length; i++) {
					const result = this.uploadFilePromise(lists[i].url)
					result
					.then((res) => {
						console.log(res.msg);
						this.imgList.push(res.msg);
						this.queryParams.imgs.push(res.msg);
						this.imgNum++;
						this.uploadAnimation=false
					})
					.catch((res) => {
						this.$refs.uNotify.show({
						    top: 10,
						    type: 'error',
						    color: '#e8e8e8',
						    bgColor: '#000',
						    message: this.$t("my.errorupload"),
						    duration: 1000 * 3,
						    fontSize: 20,
						    safeAreaInsetTop:true
						})
			
							this.uploadAnimation=false
						console.log(res);
					})
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					// let token = uni.getStorageSync('token')
					// console.log(token);
					let a = uni.uploadFile({
						url: API_URL + '/oss/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file', 
						timeout: 50000,
						header: {
							// 'Authorization': token
						},
						success: (res) => {
							console.log(res);
							const data = JSON.parse(res.data)
							resolve(data)
						},
						fail: (res) => {
							setTimeout(() => {
								console.log(res);
								reject(res)
							}, 1000)
						},
					});
				})
			},
			// 确认
			confirm(index, idItemList, e) {
				this.options[index].show = false;
				const {
					value,
					indexs
				} = e;
				// console.log(value.replaceAll("\"", ""));
				const idIndex = indexs[0];
				this.options[index]["selName"] = value[0];
				this.idList[index] = idItemList[idIndex];
				console.log(this.idList);
			},
			// 取消
			cancel(index) {
				this.options[index].show = false;
			},
			// 关闭
			close(index) {
				this.options[index].show = false;
			},
			selectBrand() {
				uni.redirectTo({
					url: `/pages/selectBrand/selectBrand?goodsName=${this.queryParams.commodity}&url=wishList&commodityEn=${this.queryParams.commodityEn}`
				})
			},
			async getCategory() {
				const res = await getSort(this.brand.id);
				// console.log(res);
				this.goodsSort = res.data;
				const item = this.goodsSort.filter(item => item.brandName == "包袋");
				if (item) this.selectSort(item[0]);
				console.log(this.goodsSort);
			},
			// 匹配u-picker需求数据
			selectSort(item) {
				this.queryParams.classificationId += "," + item.id;
				// console.log(this.queryParams);
				this.selectAcc.name = this.$t('language')=="zh"?item.brandName:item.brandEngName;
				this.selectAcc.isSelect = false;
				this.options = item.children;
				let optionList = [];
				let idItemList = [];
				this.idList = [];
				let delIndex = null;
				const tempIndex = this.options.findIndex(item => item.brandName === "附加配件")
				if(tempIndex !== -1) {
					const tempObj = this.options.splice(tempIndex, 1);
					this.checkedList = tempObj[0].children;
				}
				var peijianlist=[]
					this.checkedList.forEach((items, indexs, arrs) => {
				  if (items.brands == this.brand.id || items.brands == "308") {
				    peijianlist.push(items);
				    
				  }
				});
				this.checkedList=peijianlist
				// console.log(item.children[0].children[0]);
				for (let i = 0; i < this.options.length; i++) {
					// console.log(item.children[i].length);
					optionList = [];
					idItemList = [];
					// console.log();
					if(this.options[i].children.length > 0) {
						// console.log(this.brand.id, this.options[i].children);
						if(this.options[i].id == 12) {
							this.seriesUrl = this.options[i].url;
							if(!(this.options[i].children.filter(item => item.brands == this.brand.id).length == 0)) {
								this.idList.push("");
							} else {
								delIndex = i;
								continue
							}
						} else {
							this.idList.push("");
						}
					}
					for (let j = 0; j < this.options[i].children.length; j++) {
						// console.log(this.options[i].children[j].brands, this.brand.id, this.options[i].children[j].brands == this.brand.id);
						// if(this.options[i].children[j].brands && this.options[i].children[j].brands == this.brand.id) {
						// console.log(this.brand.id, this.options[i].children[j].brands);
						if(this.options[i].children[j].brands) {
							if(this.options[i].children[j].brands == this.brand.id||this.options[i].children[j].brands =='308') {
								optionList.push(this.$t("language")=="zh"?this.options[i].children[j].brandName:this.options[i].children[j].brandEngName?this.options[i].children[j].brandEngName:this.options[i].children[j].brandName);
								idItemList.push(String(this.options[i].children[j].id));
								continue;
							}
							continue
						}
						
						// if(this.options[i].children[j].brands) {
						// 	continue;
						// }
						optionList.push(this.$t("language")=="zh"?this.options[i].children[j].brandName:this.options[i].children[j].brandEngName?this.options[i].children[j].brandEngName:this.options[i].children[j].brandName);
						idItemList.push(String(this.options[i].children[j].id));
					}
					// console.log(optionList, i);
					this.$set(this.options[i], 'optionsList', [optionList])
					this.$set(this.options[i], 'idItemList', idItemList)
					this.$set(this.options[i], 'show', false)
					this.$set(this.options[i], 'selName', this.$t("goodsReleased.hint.selName"))
					// console.log(this.options[i]);
				}
				if(delIndex) {
					this.options.splice(delIndex, 1);
				}
				
				console.log(this.options)
				console.log(this.idList);
			},
			reSelectSort() {
				this.selectAcc.name = "";
				this.selectAcc.isSelect = true;
				this.queryParams.classificationId = this.queryParams.classificationId.split(",")[0]
			},
			selectShow(index) {
				this.options[index].show = true;
				// console.log(index, this.options[index]);
			},
			//获取时间区间年份
			getYearBetween(start) {
				var result = [];
				//使用传入参数的时间
				var startTime = new Date(start);
				var endTime = new Date();
				while (endTime - startTime >= 0) {
					//获取年份
					let year = startTime.getFullYear();
					//加入数组
					result.push(year);
					//更新日期
					startTime.setFullYear(startTime.getFullYear() + 1);
				}
				this.yearList[0] = result.reverse();
				this.yearList[0].push('NIL')
			},
			// 确认年份
			confirmYear(e) {
				this.yearName = e.value[0];
				this.Yshow = false;
			}
		},
		onShow() {
			// this.initFreight();
			this.getYearBetween(316577887000);
		},
		onLoad(options) {
			this.initRegions();
			if (options.item) {
				this.brand = JSON.parse(decodeURIComponent(options.item));
				this.queryParams.commodity = JSON.parse(decodeURIComponent(options.goodsName));
					this.queryParams.commodityEn = JSON.parse(decodeURIComponent(options.commodityEn));
				// console.log(this.brand);
				this.queryParams.classificationId = this.brand.id;
				// console.log(this.queryParams);
				this.getCategory();
			}
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("wishReleased.title")});
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.goods-name-ipt {
		position: relative;
		
		.goods-name-sty {
			margin-top: 20rpx;
			background: #FFFFFF;
			border: 1px solid rgba(128, 128, 128, 0.1);
			border-radius: 10px;
			height: 98rpx;
			padding-left: 30rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 25rpx;
			text-align: center;
			color: #000;
		}
	
		.name {
			color: #858585;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
		}
	}

	.date-options {
		margin-top: 14rpx;

		.date-name {
			color: #858585;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
		}

		.date-sel {
			margin-top: 20rpx;
			// width: 100%;
			height: 98rpx;
			background: #FFFFFF;
			border: 1px solid rgba(128, 128, 128, 0.1);
			border-radius: 10px;
			text-align: center;
			line-height: 98rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
		}
	}

	.select-brand {
		margin-top: 20rpx;
		// width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		border: 1px solid rgba(128, 128, 128, 0.1);
		border-radius: 10px;
		text-align: center;
		line-height: 98rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
	}

	.footer-btn {
		position: fixed;
		left: 50rpx;
		bottom: 0;
		right: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: #FBFBFB;

		.common-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 10px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 18px;
			text-align: center;
			line-height: 88rpx;
			margin-bottom: 26rpx;
			margin-top: 30rpx;
		}

		.cancel-btn {
			background: #F1F1F1;
			color: #858585;
		}

		.release-btn {
			background: #000000;
			color: #fff;
		}
	}
.u-checkbox-group {
		margin-top: 20rpx;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.img-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
		background-color: #FBFBFB;

		.img-item {
			position: relative;

			image {
				height: 386rpx;
				margin: 20rpx 0;
			}

			.del {
				position: absolute;
				right: 10rpx;
				top: 30rpx;
			}
		}
	}

	.u-upload {
		margin-top: 24rpx;
		background-color: #FBFBFB;
		width: 100%;
		position: relative;
	}

	.upload-img {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #858585;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		background-color: #fff;
		border-radius: 10px;
		border: 1px solid rgba(128, 128, 128, 0.1);
		text-align: center;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 200rpx;
	}

	.goodsReleased-view {
		// position: absolute;
		// width: 100%;
		// // height: 100%;
		// // top: 50rpx;
		// top: 0;
		// bottom: 0;
		// background-color: #FBFBFB;
		// z-index: -1;
		padding: 20rpx 50rpx;
		box-sizing: border-box;
		padding-bottom: 260rpx;
	
		.goods-name {
			margin-top: 14rpx;
	
			.name {
				color: #858585;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
			}
	
			input {
				margin-top: 20rpx;
				background: #FFFFFF;
				border: 1px solid rgba(128, 128, 128, 0.1);
				border-radius: 10px;
				height: 98rpx;
				padding-left: 30rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
			}
		}
	
		.goods-price {
			margin-top: 14rpx;
			position: relative;
	
			.name {
				color: #858585;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
			}
	
			.goods-price-sty {
				margin-top: 20rpx;
				background: #FFFFFF;
				border: 1px solid rgba(128, 128, 128, 0.1);
				border-radius: 10px;
				height: 98rpx;
				padding-left: 30rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 15px;
				text-align: center;
				color: #FF0000;
			}
	
			.sym {
				position: absolute;
				top: 53%;
				left: 60rpx;
				color: #858585;
			}
		}
		.goods-price {
			margin-top: 14rpx;
			position: relative;

			.name {
				color: #858585;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
			}

			.goods-price-sty {
				margin-top: 20rpx;
				background: #FFFFFF;
				border: 1px solid rgba(128, 128, 128, 0.1);
				border-radius: 10px;
				height: 98rpx;
				padding-left: 30rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 15px;
				text-align: center;
				color: #FF0000;
			}

			.sym {
				position: absolute;
				top: 53%;
				left: 60rpx;
				color: #858585;
			}
		}

		.options-list {
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
		
			.options {
				margin-top: 14rpx;
		
				.name {
					color: #858585;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 12px;
					display: flex;
					align-items: center;
		
					.name-title {
						margin-right: 10rpx;
					}
				}
		
				.sel {
					margin-top: 20rpx;
					// width: 100%;
					height: 98rpx;
					background: #FFFFFF;
					border: 1px solid rgba(128, 128, 128, 0.1);
					border-radius: 10px;
					text-align: center;
					line-height: 98rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 12px;
				}
				.wsel {
					margin-top: 20rpx;
					// width: 100%;
					height: 98rpx;
					background: #FFFFFF;
					color: #858585;
					border: 1px solid rgba(128, 128, 128, 0.1);
					border-radius: 10px;
					text-align: center;
					line-height: 98rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 12px;
				}
			}
		}
	}

	.goods-desc {
		textarea {
			background: #FFFFFF;
			border: 1px solid rgba(128, 128, 128, 0.1);
			border-radius: 10px;
			padding-top: 26rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-top: 22rpx;
			width: 100%;
			box-sizing: border-box;
		}
	}

	.sort-desc {
		margin: 30rpx 0;

		.name {
			color: #858585;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
		}
	}

	.sort-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
		// overflow: hidden;
		justify-content: space-between;
		// padding: 0 30rpx;

		.sort-item {
			margin: 0 15rpx;
			margin-top: 20rpx;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.img-desc {
				border-radius: 20rpx;
				background-color: #fff;
				box-shadow: 0rpx 0rpx 16rpx 0rpx #00000019;
				margin-top: 14rpx;
				padding: 25rpx 30rpx;
				text-align: center;
				font-size: 24rpx;
				color: #858585;
			}
		}
	}

	.select-acc {
		margin-top: 20rpx;
		// width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		border: 1px solid rgba(128, 128, 128, 0.1);
		border-radius: 10px;
		text-align: center;
		line-height: 98rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
	}

	.size {
		margin-top: 14rpx;

		.ipt-size {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
		}

		.name {
			color: #858585;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
		}

		input {
			margin-top: 10rpx;
			// width: 100%;
			height: 98rpx;
			background: #FFFFFF;
			border: 1px solid rgba(128, 128, 128, 0.1);
			border-radius: 10px;
			text-align: center;
			line-height: 98rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
			width: 150rpx;
		}
	}
</style>
